<template>
  <el-row>
    <el-col :span="8" class="sea-card">
      <el-card shadow="hover">
        <div class="user-panel">
          <img src="/static/img/head_02.png"
               class="img-circle" alt="header"/>
          <p class="user-info"> Alexander Pierce </p>
          <p class="user-info"> Web Developer Member since Nov. 2012</p>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-phone"></i> 电话：</strong>
          <span>123123121</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-envelope-o"></i> 邮箱：</strong>
          <span>413203144@qq.com</span>
        </div>
      </el-card>
    </el-col>

    <el-col :span="16" class="sea-card">
      <el-card shadow="hover">
        <el-tabs>

          <el-tab-pane label="重置密码">
            <div class="box no-border">
              <div class="box-body">
                <el-alert
                    type="success"
                    :closable="false"
                    title="重置账号的密码"
                    description="重置之后的密码为：test，重置密码需告知用户，避免用户无法登陆！">
                </el-alert>
              </div>
              <div class="box-footer">
                <el-button type="primary" size="small">重置密码</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="基础信息">
            <smart-form ref="form_modify" method="PUT" url="/sys/user/info" :model="form_data">
              <smart-form-layout require hidden name="account" label="账户">
                <smart-text-view name="account" placeholder="账户" value="med"></smart-text-view>
              </smart-form-layout>
              <smart-form-layout require name="gender" label="性别">
                <smart-select name="gender" placeholder="性别" options="non.user_gender"></smart-select>
              </smart-form-layout>
              <smart-form-layout require name="username" label="昵称">
                <smart-text-view name="username" placeholder="昵称"></smart-text-view>
              </smart-form-layout>
              <smart-form-layout require name="phone" label="手机">
                <smart-text-view name="phone" placeholder="手机"></smart-text-view>
              </smart-form-layout>
            </smart-form>
          </el-tab-pane>

          <el-tab-pane label="分组设置">
            <sea-request url="/sys/dept/list" :result-parser="resultParser">
              <el-row slot-scope="{response, reload, loading}">
                <el-col class="sea-card">
                  <span class="text-gray">选中部门进行切换，一个用户只能归属于一个部门！</span>
                  <el-button type="text" @click="reload" class="pull-right" title="刷新用户分组信息"><i
                      class="fa fa-refresh"></i> 刷新
                  </el-button>
                </el-col>
                <el-col>
                  <sea-skeleton :data="response" :loading="loading">
                    <el-tree :data="response" @node-click="handleNodeClick"
                             default-expand-all :expand-on-click-node="false">
                    </el-tree>
                  </sea-skeleton>
                </el-col>
              </el-row>
            </sea-request>

            <el-divider content-position="left">更换分组</el-divider>

            <span>
              当前分组：
              <span>普通用户</span>
<!--              <el-button type="text" title="查看分组详细信息">普通用户</el-button>-->
            </span>
            <span v-show="selectGroup.label">
              <i class="fa fa-fw fa-arrow-right"></i> 选中分组：
              <span>{{ selectGroup.label }}</span>
<!--              <el-button type="text" title="查看分组详细信息">{{ selectGroup.label }}</el-button>-->
            </span>
            <el-button v-show="selectGroup.label" type="primary" size="small" title="将用户切换到选中的分组">保存确认</el-button>
          </el-tab-pane>

          <el-tab-pane label="微信信息">
            预留板块
          </el-tab-pane>

          <el-tab-pane label="业绩排名">
            预留板块
          </el-tab-pane>

        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import Bamboo from "@/lang/bamboo";

export default {
    name: "Edit",
    props: {
        // 成功回调，通常是刷新数据表格
        onSucceed: {type: Function, default: undefined}
    },
    data() {
        return {
            // 当前受编辑的对象
            row_data: undefined,
            // form-data start 表单数据对象模型
            form_data: [
                {
                    name: 'id', label: 'ID', value: ''
                    , rules: [
                        {required: true, message: '[ID]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'account', label: '账户', value: ''
                    , rules: [
                        {required: true, message: '[账户]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'no', label: '工号', value: ''
                    , rules: [
                        {required: true, message: '[工号]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 16, message: '最多16字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'motto', label: '座右铭', value: ''
                    , rules: [
                        {required: true, message: '[座右铭]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 128, message: '最多128字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'status', label: '用户状态', value: ''
                },
                {
                    name: 'gender', label: '性别', value: ''
                },
                {
                    name: 'portrait', label: '用户头像', value: ''
                    , rules: [
                        {required: true, message: '[用户头像]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 128, message: '最多128字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'username', label: '用户名称', value: ''
                    , rules: [
                        {required: true, message: '[用户名称]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 64, message: '最多64字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'phone', label: '电话号码', value: ''
                    , rules: [
                        {required: true, message: '[电话号码]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 16, message: '最多16字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'email', label: '邮箱', value: ''
                    , rules: [
                        {required: true, message: '[邮箱]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 128, message: '最多128字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'deptId', label: '用户部门', value: ''
                    , rules: [
                        {required: true, message: '[用户部门]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'orgId', label: '机构号', value: ''
                    , rules: [
                        {required: true, message: '[机构号]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'password', label: '密码', value: ''
                    , rules: [
                        {required: true, message: '[密码]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'passwordSalt', label: '密码盐值', value: ''
                    , rules: [
                        {required: true, message: '[密码盐值]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'disabled', label: '是否可用', value: ''
                },
                {
                    name: 'gmtCreate', label: '创建日期', value: ''
                },
                {
                    name: 'gmtModified', label: '修改日期', value: ''
                },
            ],
            // form-data end


            // 正在切换分组
            changing_group: false,
            // 当前选中的分组
            selectGroup: {}
        }
    },
    methods: {
        /**
         * 查询结果转换为树形结构
         */
        resultParser: function (list) {
            if (this.$layers.isNotEmpty(list)) {
                this.row_data = list[0];
            }
            let arr = this.$bamboo.wrapList(list, Bamboo.getNameOption());
            return this.$bamboo.toTree(arr);
        },
        /**
         * 分组点击事件
         * @param data 数据
         */
        handleNodeClick: function (data) {
            this.selectGroup = data;
        },
        /**
         * 设置行级数据
         * @param row 行级数据
         */
        setRowData: function (row){
            this.row_data = row;
            this.$refs.form_modify.val(row);
        }
    }
}
</script>

<style scoped>
.user-panel {
    text-align: center;
    background-color: #3c8dbc;
}

.user-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin-top: 10px;
}

.img-circle {
    margin-top: 26px;
    height: 90px;
    width: 90px;
    background-color: #eeeeee;
    border: 3px solid rgba(255, 255, 255, 0.2);
}
</style>
